<template>
  <div>
    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 表单 -->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="">
          <!-- 输入框 -->
          <el-input placeholder="关键字"></el-input>
        </el-form-item>
        <el-form-item label="">
          <!-- 搜索按钮 -->
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </el-form-item>
      </el-form>
      <div>
        <!-- 添加按钮 -->
        <el-button type="primary" icon="el-icon-plus">添加</el-button>
        <!-- 刷新按钮 -->
        <el-button type="primary" icon="el-icon-refresh">刷新</el-button>
      </div>
    </el-card>
    <el-card class="box-card">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <!-- <el-table-column prop="index" label="序号" width="80"></el-table-column> -->
        <el-table-column
          prop="categoryName"
          label="类别名称"
          width="120"
        ></el-table-column>
        <el-table-column prop="isActive" label="是否启用">
          <template slot-scope="scope">{{
            scope.row.isActive === true ? "启用" : "禁用"
          }}</template>
        </el-table-column>
        <el-table-column label="日期" width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="mark" label="备注"></el-table-column>
        <el-table-column label="操作">
          <!-- 编辑按钮 -->
          <el-button size="mini" icon="el-icon-edit">编辑</el-button>
          <!-- 删除按钮 -->
          <el-button size="mini" type="danger" icon="el-icon-delete"
            >删除</el-button
          >
        </el-table-column>
      </el-table>
    </el-card>
    <el-pagination background layout="prev, pager, next" :total="1000">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
    };
  },

  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style>
.el-table {
  border: 2px solid pink;
}
.el-card__body {
  display: flex;
  /* 垂直居中 */
  justify-content: space-between;
}
.el-table th.el-table__cell > .cell {
  /* !important 提升优先级 */
  padding-left: 14px !important;
}
.slh {
  /* 溢出隐藏 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.el-table-column--selection .cell {
  padding-left: 0px;
  padding-right: 14px;
}
.el-pagination {
  margin-top: 82px;
  margin-bottom: 0px;
}
</style>